<template>
    <div class="box">
        <div class="upper">
            <a-card>
                <a-typography-title :level="4">试题段落始于</a-typography-title>
                <a-checkbox-group v-model:value="types.question" name="checkboxgroup" :options="checkOptions.question" @change="format"/>

                <a-divider />

                <a-typography-title :level="4">答案段落始于</a-typography-title>
                <a-checkbox-group v-model:value="types.answer" name="checkboxgroup" :options="checkOptions.answer" @change="format"/>

                <a-divider />

                <a-typography-title :level="4">解析段落始于</a-typography-title>
                <a-checkbox-group v-model:value="types.solution" name="checkboxgroup" :options="checkOptions.solution" @change="format"/>

            </a-card>
        </div>
        <div class="lower">
            <div class="content">
                <div class="left">
                    <a-textarea v-model:value="input" placeholder="输入代码..." :rows="20" @change="debouncedFormat"/>
                </div>
                <div class="center">
                    <a-button type="primary" size="middle" @click="format">
                        <template #icon>
                            <SendOutlined />
                        </template>
                        Translate
                    </a-button>
                </div>
                <div class="right">
                    <a-textarea v-model:value="output" placeholder="输出代码..." :rows="20" />
                </div>

                
            </div>
        </div>
    </div>






    
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { debounce } from '@/utils';
import { SendOutlined } from '@ant-design/icons-vue';

import axois from 'axios';

const input = ref<string>('');
const output = ref<string>('');



async function translate(input :string) :Promise<string>{
    if(!input) {
        return '';
    }
    let tmpTypes :any = {
        answer: [],
        solution: [],
        question: []
    };
    
    types.answer.forEach((element :any) => {
        tmpTypes.answer.push({
            regex: element
        })
    })

    types.solution.forEach((element :any) => {
        tmpTypes.solution.push({
            regex: element
        })
    })

    types.question.forEach((element :any) => {
        tmpTypes.question.push({
            regex: element
        })
    })

    const res = await axois.post('api/format', {code: input, types: tmpTypes});
    return res.data;
}

async function format() {
    const data = await translate(input.value);
    output.value = data;
}

const debouncedFormat = debounce(format, 300);


async function getTypes() {
   const data = await axois.get('api/get_types');
   return data.data;
}

import type { Type } from '@/utils/types';

const types = reactive({
    answer: [],
    solution: [],
    question: []
})


const checkOptions: any = reactive({
    answer: [],
    solution: [],
    question: []
});



onMounted(async () => {
   const data = await getTypes();
   
   if (data.answer.length > 0) {
       checkOptions.answer = data.answer.map((element: any) => ({
           value: element.regex,
           label: element.description
       }));
       // 默认选中第一个
       // @ts-ignore
       types.answer = [checkOptions.answer[0].value];
   }

   if (data.solution.length > 0) {
       checkOptions.solution = data.solution.map((element: Type) => ({
           value: element.regex,
           label: element.description
       }));
       // 默认选中第一个
       // @ts-ignore
       types.solution = [checkOptions.solution[0].value];
   }

   if (data.question.length > 0) {
       checkOptions.question = data.question.map((element: Type) => ({
           value: element.regex,
           label: element.description
       }));
       // 默认选中第一个
       // @ts-ignore
       types.question = [checkOptions.question[0].value];
   }
});


</script>

<style lang="scss" scoped>

    .content {
        display: flex;
        padding: 10px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .left {
        flex: 10;
    }
    .right {
        flex: 10;
    }
    .center {
        flex: 2;
    }
</style>